<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Search Results</title>
    <link rel="stylesheet" href="../layui-v2.9.10/layui/css/layui.css">
</head>
<style>
    body {
        background-color: #f5f5f5;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        margin: 0;
        padding: 0;
    }
    .layui-nav-child {
        color: #0C0C0C;
    }
    .layui-header {
        background-color: #303030;
        color: #fff;
        padding: 0 15px;
    }
    .layui-header .layui-logo {
        font-size: 24px;
        line-height: 60px;
        margin-right: 30px;
    }
    .layui-side, .layui-layout-admin .layui-body, .layui-footer {
        background-color: #f5f5f5;
        color: #333;
    }
    .layui-card-header {
        background-color: #303030;
        color: #fff;
    }
    .layui-card-body {
        background-color: #fff;
        color: #333;
    }
    .layui-layout-admin .layui-body {
        padding: 15px;
    }
    .layui-side {
        background-color: #333; /* Background color */
        flex-shrink: 0;
    }
    .layui-side-scroll {
        height: 100%; /* Set height to 100% */
        overflow: auto;
    }
</style>
<body>
<div class="layui-layout layui-layout-admin">
    <%-- Header Navigation --%>
    <div class="layui-header">
        <a href="home.jsp">
            <div class="layui-logo layui-hide-xs">新闻发布系统</div>
        </a>
        <!-- Header Area -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a>用户管理</a></li>
            <li class="layui-nav-item"><a>新闻管理</a></li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
                <a href="home.jsp">
                    <img src="../image/back-image.jpg" class="layui-nav-img"> <!-- Change to actual user avatar link -->
                    <%= session.getAttribute("username") %>
                </a>
                <dl class="layui-nav-child" style="color: #0C0C0C">
                    <dd><a href="home.jsp">首页</a></dd>
                    <dd><a href="../infoServlet.do">个人信息</a></dd>
                    <dd><a href="setting.jsp">设置</a></dd>
                    <dd><a href="../home/login-2.jsp;">退出</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                <a>
                    <i class="layui-icon layui-icon-more-vertical"></i>
                </a>
            </li>
        </ul>
    </div>

    <%-- Side Navigation --%>
    <div class="layui-side">
        <div class="layui-side-scroll">
            <!-- Left Navigation Area -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a>用户列表</a>
                    <dl class="layui-nav-child">
                        <dd><a href="usermanager.jsp;">用户查询</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a>新闻列表</a>
                    <dl class="layui-nav-child">
                        <dd><a href="news_publish.jsp">新闻发布</a></dd>
                        <dd><a href="news_view.jsp">新闻浏览</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>

    <%-- Body Area --%>
    <div class="layui-body" style="padding: 20px;">
        <!-- Main Content Area -->
        <div>
            <form class="layui-form layui-row layui-col-space16" method="post" action="../SearchServlet.do">
                <div class="layui-col-md4">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-username"></i>
                        </div>
                        <input type="text" name="username" value="" placeholder="Username" class="layui-input" lay-affix="clear">
                    </div>
                </div>
                <div class="layui-col-md4">
                    <div class="layui-input-wrap">
                        <input type="text" name="id" placeholder="ID" lay-affix="clear" class="layui-input">
                    </div>
                </div>
                <div class="layui-col-md4">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-date"></i>
                        </div>
                        <input type="text" name="date" readonly placeholder="Date" class="layui-input demo-table-search-date">
                    </div>
                </div>
                <div class="layui-btn-container layui-col-xs12">
                    <button class="layui-btn" lay-submit lay-filter="demo-table-search">搜索</button>
                    <button type="reset" class="layui-btn layui-btn-primary">清空</button>
                </div>
            </form>

            <h1 style="margin-bottom: 20px;">查询结果</h1>
            <div class="layui-card">
                <div class="layui-card-body">
                    <table id="searchResultsTable" class="layui-hide" lay-filter="searchResultsTable"></table>
                </div>
            </div>
        </div>
    </div>

    <h1 style="margin-bottom: 20px;">查询结果</h1>

</div>


<script src="../layui-v2.9.10/layui/layui.js"></script>
<script>
    layui.use(['table'], function(){
        var table = layui.table;

        // Fetching data from JSTL and creating a JavaScript array
        var searchResults = [
            <c:forEach var="user" items="${searchResults}" varStatus="status">
            {
                id: '${user.id}',
                username: '${user.username}',
                gender: '${user.gender}',
                profession: '${user.profession}',
                favor: '${user.favor}',
                description: '${user.description}',
                state: '${user.state==1 ?"启用":"禁用"}',
                role: '${user.role==1 ?"用户":"管理员"}'
            }<c:if test="${!status.last}">,</c:if>
            </c:forEach>
        ];

        // Render Table
        table.render({
            elem: '#searchResultsTable',
            cols: [[
                {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'},
                {field: 'username', title: 'Username', width: 120},
                {field: 'gender', title: 'Gender', width: 100},
                {field: 'profession', title: 'Profession', width: 150},
                {field: 'favor', title: 'Favor', width: 120},
                {field: 'description', title: 'Description', width: 200},
                {field: 'state', title: 'State', width: 100},
                {field: 'role', title: 'Role', width: 100},
                {fixed: 'right', title: 'Actions', toolbar: '#actionButtons', width: 200}
            ]],
            data: searchResults,
            page: true,
            skin: 'line',
            even: true
        });


        table.on('tool(searchResultsTable)', function(obj){
            var data = obj.data;
            var layEvent = obj.event;
            if(layEvent === 'view'){
                viewUser(data.id);
            } else if(layEvent === 'edit'){
                modifyUser(data.id);
            } else if(layEvent === 'del'){
                deleteUser(data.id);
            } else if(layEvent === 'disable'){
                disableUser(data.id);
            }
        });
    });

    // Function to view user
    function viewUser(userId) {
        window.location.href = '<%= request.getContextPath() %>/SearchServlet2.do?id=' + userId;
    }

    // Function to modify user
    function modifyUser(userId) {
        window.location.href = '<%= request.getContextPath() %>/ModifyUser.do?id=' + userId;
    }

    // Function to delete user
    function deleteUser(userId) {
        if (confirm("确定删除用户?")) {
            window.location.href = '<%= request.getContextPath() %>/DeleteUserServlet.do?id=' + userId;
        }
    }


</script>

<script type="text/html" id="actionButtons">
    <a class="layui-btn layui-btn-xs" lay-event="view">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

</script>
</body>
</html>
